<template>
  <div>
    <el-button-group>
      <el-button plain icon="el-icon-plus" @click="handleAdd">添加扩展字段</el-button>
    </el-button-group>
    <h3 class="table-title">拓展字段列表</h3>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="选择会议类型">
        <el-radio-group v-model="conferTypeValue" size="small" style="margin-bottom: 1rem;">
          <el-radio-button
            v-for="item in conferTypes"
            :key="item.id"
            :label="item.value"
          >{{ item.alias }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <el-table
      v-if="conferTypesDict"
      v-loading="tableLoading"
      :data="TableData"
      highlight-current-row
    >
      <el-table-column label="序号" type="index" fixed="left" width="50">
        <template slot-scope="scope">
          <span>{{ scope.$index + page.pageIndex*page.pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="字段名" prop="name" />
      <el-table-column label="名称" prop="alias" />
      <el-table-column label="优先级" prop="priority" />
      <el-table-column label="描述" prop="description" width="200" show-overflow-tooltip />
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pagesetting.sync="page" :total-count="totalCount" />
    <el-dialog :visible.sync="dialogFlag" :title="dialogTitle">
      <el-form ref="extendTypesManage" v-model="formData" label-width="120px">
        <el-form-item label="字段名">
          <el-input v-model="formData.name" placeholder="英文名称" />
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="formData.alias" />
        </el-form-item>
        <el-form-item label="会议类型">
          <ConferTypeSelector v-model="formData.type" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="formData.description" type="textarea" />
        </el-form-item>
        <el-form-item label="优先级">
          <el-input v-model="formData.priority" placeholder="用于排序的优先级" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formData)">立即提交</el-button>
          <el-button @click="resetForm(formData)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>>
<script>
import {
  getExtendTypes,
  updateExtendType
} from '@/api/zzxt/party-conference/confer-extend-fields'
export default {
  name: 'ExtendTypesManage',
  components: {
    Pagination: () => import('@/components/Pagination'),
    ConferTypeSelector: () =>
      import('@/components/Party/ConferType/ConferTypeSelector')
  },
  data: () => ({
    TableData: null,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0,
    tableLoading: false,
    dialogTitle: '',
    dialogFlag: false,
    submitLoading: false,
    formData: {},
    conferTypeValue: 1
  }),
  computed: {
    conferTypesDict() {
      return this.$store.state.party.conferTypesDict
    },
    conferTypes() {
      const ar = this.$store.state.party.conferTypes
      return ar.filter(i => i.value !== 0)
    }
  },
  watch: {
    conferTypeValue: {
      handler(val) {
        this.refresh()
      }
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    refresh() {
      this.tableLoading = true
      getExtendTypes({ conferenceType: this.conferTypeValue })
        .then(data => {
          this.TableData = data.list
          this.totalCount = data.totalCount
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    handleEdit(row) {
      this.dialogTitle = '编辑扩展字段'
      this.formData = row
      this.dialogFlag = true
    },
    handleAdd() {
      this.formData = {}
      this.dialogTitle = '添加拓展字段'
      this.dialogFlag = true
    },
    handleDelete(row) {
      this.$confirm('确认删除？').then(_ => {
        updateExtendType({ id: row.id, isRemoved: true }).then(item => {
          this.$message.success('删除成功')
          this.refresh()
        })
      })
    },
    submitForm(formData) {
      updateExtendType(formData).then(data => {
        this.$message.success('添加成功')
        this.refresh()
        this.dialogFlag = false
      })
    },
    resetForm(form) {
      form = {}
    }
  }
}
</script>
<style scoped>
.table-title {
  font-weight: 500px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: center;
}
</style>
